<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会议记录 - NoteX</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #2196F3;
            --text-color: #333;
            --bg-color: #fff;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            color: var(--text-color);
            background-color: var(--bg-color);
        }

        .top-bar {
            height: 60px;
            border-bottom: 1px solid #e5e7eb;
        }

        .meeting-title {
            font-size: 24px;
            font-weight: bold;
        }

        .info-bar {
            background-color: #f9fafb;
            padding: 10px;
            border-bottom: 1px solid #e5e7eb;
        }

        .sidebar {
            width: 280px;
            transition: all 0.3s ease;
        }

        .sidebar.collapsed {
            width: 60px;
        }

        .agenda-item {
            border-left: 3px solid #2196F3;
            padding-left: 15px;
            margin-bottom: 20px;
        }

        .progress-bar {
            height: 4px;
            background-color: #e5e7eb;
            border-radius: 2px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background-color: #4CAF50;
            transition: width 0.3s ease;
        }

        .note-item {
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .note-item:hover {
            background-color: #f0f9ff;
            transform: translateX(5px);
        }

        .highlight-toolbar {
            position: absolute;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: none;
        }

        .attachment-thumbnail {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 4px;
            margin: 5px;
        }

        .ai-panel {
            width: 300px;
            border-left: 1px solid #e5e7eb;
        }

        .bottom-bar {
            height: 50px;
            border-top: 1px solid #e5e7eb;
            background-color: white;
        }

        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
        }

        .status-pending { background-color: #fff3cd; color: #856404; }
        .status-ongoing { background-color: #cce5ff; color: #004085; }
        .status-archived { background-color: #d4edda; color: #155724; }

        .member-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .template-item {
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 5px;
            cursor: pointer;
        }

        .template-item:hover {
            background-color: #f0f9ff;
        }

        .drag-handle {
            cursor: move;
            opacity: 0.5;
        }

        .drag-handle:hover {
            opacity: 1;
        }
    </style>
</head>
<body class="flex flex-col h-screen">
    <!-- 顶部功能区 -->
    <header class="top-bar flex items-center justify-between px-4 bg-white">
        <div class="flex items-center space-x-4">
            <h1 class="meeting-title" contenteditable="true">2024-03-20 项目进度会议</h1>
        </div>
        <div class="flex items-center space-x-4">
            <button class="p-2 hover:bg-gray-100 rounded-full">
                <i class="fas fa-save"></i>
            </button>
            <button class="p-2 hover:bg-gray-100 rounded-full">
                <i class="fas fa-share-alt"></i>
            </button>
        </div>
    </header>

    <!-- 基础信息栏 -->
    <div class="info-bar flex items-center space-x-4">
        <div class="flex items-center">
            <i class="fas fa-calendar-alt mr-2"></i>
            <input type="datetime-local" class="border rounded px-2 py-1" value="2024-03-20T14:00">
        </div>
        <div class="flex items-center">
            <i class="fas fa-users mr-2"></i>
            <div class="flex">
                <img src="https://via.placeholder.com/24" alt="成员1" class="member-avatar">
                <img src="https://via.placeholder.com/24" alt="成员2" class="member-avatar">
                <button class="ml-2 text-blue-500">+ 添加成员</button>
            </div>
        </div>
        <div class="flex items-center">
            <i class="fas fa-tags mr-2"></i>
            <select class="border rounded px-2 py-1">
                <option>项目A</option>
                <option>项目B</option>
            </select>
        </div>
        <div class="flex items-center">
            <span class="status-badge status-ongoing">进行中</span>
        </div>
    </div>

    <div class="flex flex-1 overflow-hidden">
        <!-- 左侧面板 -->
        <aside class="sidebar bg-white border-r">
            <nav class="p-4">
                <div class="font-medium mb-2">会议模板</div>
                <div class="space-y-2">
                    <div class="template-item">
                        <i class="fas fa-lightbulb mr-2"></i>头脑风暴
                    </div>
                    <div class="template-item">
                        <i class="fas fa-calendar-week mr-2"></i>周会
                    </div>
                    <div class="template-item">
                        <i class="fas fa-user-tie mr-2"></i>客户访谈
                    </div>
                </div>
            </nav>
            <nav class="p-4 border-t">
                <div class="font-medium mb-2">历史会议</div>
                <div class="space-y-2">
                    <div class="template-item note-item" onclick="window.location.href='项目会议记录.html'">
                        <div class="text-sm text-gray-500">2024-03-13</div>
                        <div>项目A进度会议</div>
                    </div>
                    <div class="template-item note-item" onclick="window.location.href='项目会议记录.html'">
                        <div class="text-sm text-gray-500">2024-03-06</div>
                        <div>项目B需求讨论</div>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- 中央编辑区 -->
        <main class="flex-1 overflow-auto p-4">
            <!-- 议程跟踪区 -->
            <div class="mb-8">
                <h2 class="text-lg font-medium mb-4">议程</h2>
                <div class="space-y-4">
                    <div class="agenda-item">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <i class="fas fa-grip-vertical drag-handle mr-2"></i>
                                <span>项目进度汇报</span>
                            </div>
                            <div class="text-sm text-gray-500">14:00 - 14:30</div>
                        </div>
                        <div class="progress-bar mt-2">
                            <div class="progress-fill" style="width: 75%"></div>
                        </div>
                        <div class="text-xs text-gray-500 mt-1">计划: 30分钟 | 实际: 22分钟</div>
                    </div>
                </div>
            </div>

            <!-- 实时记录区 -->
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <h2 class="text-lg font-medium mb-4">会议记录</h2>
                    <div class="space-y-2">
                        <div class="note-item">
                            <div class="flex items-start">
                                <div class="w-4 h-4 rounded-full bg-blue-500 mt-1 mr-2"></div>
                                <div>项目A的开发进度正常，预计下周可以完成主要功能。</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <h2 class="text-lg font-medium mb-4">重点标记</h2>
                    <div class="space-y-4">
                        <div>
                            <h3 class="font-medium mb-2">决策</h3>
                            <div class="note-item bg-blue-50">
                                决定将项目A的交付日期推迟一周
                            </div>
                        </div>
                        <div>
                            <h3 class="font-medium mb-2">待办</h3>
                            <div class="note-item bg-yellow-50">
                                张三负责更新项目文档
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 附件区 -->
            <div class="mt-8">
                <h2 class="text-lg font-medium mb-4">附件</h2>
                <div class="flex flex-wrap">
                    <img src="https://via.placeholder.com/100" alt="附件1" class="attachment-thumbnail">
                    <img src="https://via.placeholder.com/100" alt="附件2" class="attachment-thumbnail">
                    <button class="attachment-thumbnail border-2 border-dashed flex items-center justify-center">
                        <i class="fas fa-plus text-gray-400"></i>
                    </button>
                </div>
            </div>
        </main>

        <!-- 右侧智能侧边栏 -->
        <aside class="ai-panel bg-white p-4">
            <div class="mb-4">
                <h3 class="font-medium mb-2">AI 辅助</h3>
                <div class="space-y-2">
                    <button class="w-full p-2 text-left hover:bg-gray-100 rounded">
                        <i class="fas fa-file-alt mr-2"></i>生成摘要
                    </button>
                    <button class="w-full p-2 text-left hover:bg-gray-100 rounded">
                        <i class="fas fa-tasks mr-2"></i>提取待办
                    </button>
                    <button class="w-full p-2 text-left hover:bg-gray-100 rounded">
                        <i class="fas fa-microphone mr-2"></i>语音回顾
                    </button>
                </div>
            </div>
            <div class="border-t pt-4">
                <h3 class="font-medium mb-2">协作工具</h3>
                <div class="space-y-2">
                    <button class="w-full p-2 text-left hover:bg-gray-100 rounded">
                        <i class="fas fa-comment mr-2"></i>添加评论
                    </button>
                    <button class="w-full p-2 text-left hover:bg-gray-100 rounded">
                        <i class="fas fa-file-export mr-2"></i>导出纪要
                    </button>
                </div>
            </div>
        </aside>
    </div>

    <!-- 底部快捷操作栏 -->
    <footer class="bottom-bar flex items-center justify-between px-4">
        <div class="flex items-center space-x-4">
            <button class="p-2 hover:bg-gray-100 rounded">
                <i class="fas fa-archive mr-2"></i>归档会议
            </button>
            <button class="p-2 hover:bg-gray-100 rounded">
                <i class="fas fa-calendar-plus mr-2"></i>添加到日历
            </button>
            <button class="p-2 hover:bg-gray-100 rounded">
                <i class="fas fa-tasks mr-2"></i>创建任务
            </button>
        </div>
        <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-500">上次保存: 14:25</span>
            <button class="p-2 hover:bg-gray-100 rounded">
                <i class="fas fa-save"></i>
            </button>
        </div>
    </footer>

    <script>
        // 拖拽功能实现
        document.addEventListener('DOMContentLoaded', function() {
            // 议程项拖拽
            const agendaItems = document.querySelectorAll('.agenda-item');
            const dragHandle = document.querySelector('.drag-handle');

            agendaItems.forEach(item => {
                item.addEventListener('dragstart', function(e) {
                    this.classList.add('dragging');
                });

                item.addEventListener('dragend', function() {
                    this.classList.remove('dragging');
                });
            });

            // 高亮工具栏
            const highlightToolbar = document.createElement('div');
            highlightToolbar.className = 'highlight-toolbar';
            document.body.appendChild(highlightToolbar);

            document.addEventListener('mouseup', function(e) {
                const selection = window.getSelection();
                if (selection.toString().length > 0) {
                    highlightToolbar.style.display = 'block';
                    highlightToolbar.style.left = e.pageX + 'px';
                    highlightToolbar.style.top = e.pageY + 'px';
                } else {
                    highlightToolbar.style.display = 'none';
                }
            });

            // 状态切换
            const statusBadge = document.querySelector('.status-badge');
            const statusButtons = document.querySelectorAll('.status-button');

            statusButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const status = this.dataset.status;
                    statusBadge.className = `status-badge status-${status}`;
                    statusBadge.textContent = this.dataset.text;
                });
            });

            // 添加点击事件处理
            const meetingItems = document.querySelectorAll('.template-item.note-item');
            meetingItems.forEach(item => {
                item.addEventListener('click', function() {
                    window.location.href = '项目会议记录.html';
                });
            });
        });
    </script>
</body>
</html>
